<template>
    <van-row>
        <van-col span="2"> <van-nav-bar left-arrow @click-left="onClickLeft" :border="false" />
        </van-col>
        <van-col span="2">
            <van-icon name="home-o" size="24px" style="margin-top: 10px; margin-left: 4px;" />
        </van-col>
        <van-col span="16">
            <p style="text-align: center;font-size: 18px;line-height: 46px;
            font-weight: 500;">搜索</p>
        </van-col>
        <van-col span="2">
            <van-icon name="search" size="24px" class="icon" />
        </van-col>
        <van-col span="2"><van-icon name="wap-nav" size="24px" class="icon" /></van-col>
    </van-row>
    <van-search 
        v-model="Keyword" 
        placeholder="请输入搜索关键词" 
        wrap-with-form 
        show-action 
        @cancel="onCancel"
        @Search="onSearch" />

    <!-- 搜索结果区域：仅当Keyword有内容时展示（去空格后判断） -->
    <div class="container" v-if="Keyword.trim()">
        <span style="border-bottom: 3px solid yellow; margin-left: 10px;">新车</span>
        <van-swipe-cell v-for="(item,index) in searchres" :key="index">
            <van-card :num="item.num" 
            :price="item.price" 
            :desc="item.desc" 
            :title="item.title" class="goods-card"
            :thumb="item.thumb" />
        </van-swipe-cell>
    </div>
    <!--无匹配结果提示-->
    <div v-if="searchres.length=== 0" style="text-align: center; color: #000;">
        暂无匹配的搜索结果。推荐的商品
    </div>
</template>

<script setup>
import { ref, watch} from 'vue'
const Keyword = ref('')

// 搜索结果数组，初始为空
const searchres= ref([]);

// 取消搜索：清空关键词（触发结果区域隐藏）
const onCancel = () => {
    // alert('取消'); // 可保留或删除
    // 清空关键词后 v-if判断为false 结果区域自动隐藏
    Keyword.value = ''
}
// 最主要的一个点就是监控关键字的变化，然后调用mockSearch函数进行搜索
watch(Keyword, (newVal) => { 
    // keyword 去空判断，为空时不执行搜索 有内容的时候我们才执行搜索
    const keyword = newVal.trim()
    if (keyword) {
        // 调用搜索函数，传入当前关键字进行搜索
        mockSearch(keyword)
    } else { 
        searchres.value = [] // 清空搜索结果数组，隐藏结果区域
    }


})


const onClickLeft = () => history.back();

// 模拟搜索结果数据（实际应用中应从后端获取）
// 用以个函数 先封装起来
const mockSearch = (Keyword) => { 

    // 假定有以下商品数据，实际应用中应从后端获取
    const mockData = ref([
        { num: '2', price: '400', desc: '全新汽车奔驰C260，省油不省钱', title: '奔驰C260', thumb: 'https://p3.dcarimg.com/img/tos-cn-i-dcdx/47b5070427dc42ecbd9d221897ffde64~tplv-resize:750:0.png' },
        { num: '3', price: '1400', desc: '全新汽车奔驰E260，省油不省钱', title: '奔驰E260', thumb: 'https://img14.360buyimg.com/imagetools/jfs/t1/198577/25/10777/100000/611' },
        { num: '4', price: '2400', desc: '全新汽车奔驰GLC260，省油不省钱', title: '奔驰GLC260', thumb: 'https://p1-dcd.byteimg.com/img/motor-mis-img/f3661c49f6ef580b584fcdb8c23a2a02~tplv-resize:202:0.jpg' }
    ])
    //模拟接口
    setTimeout(() => {
        setTimeout(() => {
            //筛选输入包含的结果集
            searchres.value = mockData.value.filter(item =>
                item.title.includes(Keyword) || item.desc.includes(Keyword)
            )

        }, 300);
     },300)
}
const onSearch = () => {
    const keyword = Keyword.value.trim();
    // 这里可以添加搜索按钮点击后的逻辑，例如触发搜索函数
   if (keyword) mockSearch(Keyword.value)
}
</script>

<style scoped>
:deep(.van-nav-bar .van-icon) {
    color: #1a1b1c;
    font-size: 20px;
}
.icon{
    margin-top: 10px;
        margin-left: 4px;
}
:deep(.van-search__action){
    color: #66a6ff;
    font-size: 18px;
}
</style>